//Nicccce
import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx';
import ZoneListItem from '../components/ZoneListItem.jsx';
import {CSS} from '../styles/zoneList.css';
import WeUI from 'react-weui';


const {
    CellHeader,
    Label,
    FormCell,
    Select,
    Toptips,
    Dialog
} = WeUI;
export default class ZoneListContainer extends Component {
    constructor(props) {
        super(props);
        this.CheckClick = this.CheckClick.bind(this);
        this.BackList = this.BackList.bind(this);
        this.selectProvince = this.selectProvince.bind(this);
        this.state = {
            incubatorData: [],
            provinceData: [],
            showWarn: false,
            warnTimer: null,
            tipText: "",
            warningContractShow: false,
            warningButtons: [
                {
                    label: '好的',
                    onClick: this.BackList
                }
            ]
        };
        this.state.warnTimer && clearTimeout(this.state.warnTimer);
    }
    showWarn(text) {
        this.setState({showWarn: true, tipText: text});

        this.state.warnTimer = setTimeout(()=> {
            this.setState({showWarn: false});
        }, 2000);
    }

    componentWillMount() {
        let self=this;
        fetch(getHost() + "/province", {
            credentials: 'include'
        }).then(response => response.json())
            .then(d => {
                let provinceData = d.data;
                if (provinceData && provinceData.length > 0) {
                    // let defaultProvince=provinceData[0];
                    fetch(getHost() + "/incubator/province", {
                        credentials: 'include'
                    }).then(response => response.json())
                        .then(dd => {
                            console.log(JSON.stringify(dd));
                            this.setState({provinceData: provinceData, incubatorData: dd.data})
                        });
                } else {
                    self.showWarn("网络出了点问题，请重试！");
                }
            }).catch(e => {
            self.showWarn("网络不给力，请重试！");
        });
    }

    CheckClick(incubatorId) {
        let self=this;
        fetch(getHost() + "/contract/ineffective", {
            credentials: "include"
        }).then(response => response.json())
            .then(json => {
                if (json.success && json.data && json.data.id) {
                    self.setState({
                        warningContractShow: true
                    });
                } else {
                    fetch(getHost() + "/incubator/choose?incubatorId=" +incubatorId, {
                        credentials: 'include'
                    });
                    markDataRequestFlag();
                    location.hash = "/ChooseType";
                }
            }).catch(e => {
            console.log(e);
        })
    }
    BackList() {
        location.hash = "/ContractList";
    }

    selectProvince(event) {
        const provinceValue = event.target.value;
        let interfaceUrl = "";
        if (parseInt(provinceValue) > 0) {
            interfaceUrl = "/incubator/province?provinceId=" + provinceValue;
        } else {
            interfaceUrl = "/incubator/province";
        }
        fetch(getHost() + interfaceUrl, {
            credentials: 'include'
        }).then(response => response.json())
            .then(d => {
                console.log(d);
                this.setState({incubatorData: d.data})
            });
    }


    render() {
        let optionArr = [];
        for (let index = 0; index < this.state.provinceData.length; index++) {
            optionArr.push(<option value={this.state.provinceData[index].id} key={index}>{this.state.provinceData[index].name}</option>);
        }
        let selectHtml = <div className="chooseProvince">
            <FormCell select>
                <CellHeader>
                    <Label>省份筛选：</Label>
                </CellHeader>
                <Select defaultValue="0" id="province"
                        onChange={this.selectProvince.bind(this)}>
                    <option value="0">所有省份</option>
                    {optionArr}
                </Select>
            </FormCell>
        </div>;
        return (
            <div className="whiteBg">
                <NavigationBar Title="园区列表" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                {selectHtml}
                <div id="zoneList">
                    <div style={{width: "100%",paddingBottom:"2rem"}}>
                        {this.state.incubatorData.map((data, index) =>
                            <ZoneListItem key={data.id + "" + index}
                                          provinceId={data.provinceId}
                                          incubatorId={data.id}
                                          name={data.name} online={data.online} path={data.picUrl}
                                          callbackParent={this.CheckClick}
                            />
                        )}
                    </div>
                </div>
                <Toptips type="warn" show={this.state.showWarn}>{this.state.tipText}</Toptips>
                <Dialog title="未支付合约" buttons={this.state.warningButtons} show={this.state.warningContractShow}>
                    您有未支付合约，请先处理！
                </Dialog>
            </div>
        )
    }


}
